<!-- 店铺罗盘 -->
<template>
	<view class="">
		<u-navbar :is-back="true" title="店铺罗盘"></u-navbar>
		<view class="bg-white p-t30">
			<view class=" flex-bettwen padding-lr30">
				<view class="tab-item p-b20 center color-gray " @click="current = index"
					:class="current == index?'tab-item-active':''" v-for="(item,index) in tabList" :key="index">
					<view class="fs28">{{item.text}}</view>
				</view>
			</view>
		</view>
		<view class="bg-white" v-if="current !== 3">
			<scroll-view :scroll-x="true" class="scrollview-box padding30">
				<block v-for="(item,index) in scrollList" :key="index">
					<u-tag  :text="item.text" class="m-r20 scroll-item" @click="selectTime(item,index)" :type="currentTime== index?'primary':'info'" mode="light" />
				</block>
			</scroll-view>
		</view>
		
		
		<Manage v-show="current == 0" />
		<Deal v-if="current == 1" />
		<Goods v-if="current == 2" />
		<Server v-if="current == 3" />
		<HotSearch v-if="current == 4" />
		
		
		<u-calendar v-model="showCalendar" mode="range"></u-calendar>

	</view>
</template>

<script>
	import Manage from './components/manage.vue'
	import Deal from './components/deal.vue'
	import Goods from './components/goods.vue'
	import Server from './components/server.vue'
	import HotSearch from './components/hotSearch.vue'
	export default {
		components:{
			Manage,
			Deal,
			Goods,
			Server,
			HotSearch
		},
		data() {
			return {
				current: 0,
				showCalendar:false,
				tabList: [{
					text: '经营指标',
				}, {
					text: '交易数据',
				}, {
					text: '商品数据',
				}, {
					text: '服务体验',
				}, {
					text: '热门搜索',
				}],
				currentTime: 0,
				scrollList: [{
						text: '今日'
					},
					{
						text: '昨日'
					},
					{
						text: '近7日'
					},
					{
						text: '近30天'
					},
					{
						text: '自然日'
					},
					{
						text: '自然月'
					},
					{
						text: '自定义'
					},
				],
			
			}
		},
		methods:{
			selectTime(item,idx){
				this.currentTime = idx
				if(item.text == '自定义'){
					this.showCalendar = true
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tab-item {
		text-align: center;
		position: relative;

	}

	.tab-item-active {
		color: #269dd1;
	}

	.tab-item-active::after {
		position: absolute;
		content: "";
		display: block;
		width: 50rpx;
		height: 10rpx;
		background: #269dd1;
		left: 50%;
		bottom: 0;
		transform: translate(-50%);
	}

	.scrollview-box {
		white-space: nowrap;
		/* 滚动必须加的属性 */
		// width: 100%;
	}

	.scroll-item {
		display: inline-flex;
		/* item的外层定义成行内元素才可进行滚动 inline-block / inline-flex 均可 */
		flex-direction: column;
		align-items: center;
	}
	.price-color{
		color: #e12539;
	}
	.green-color{
		color: #58bc6a;
	}
</style>
<style>
	page{
		background: #fff;
	}
</style>